<script setup lang="tsx">
import { reactive, ref } from 'vue'
import bar from './components/bar-chart.vue'
import Map from './components/mapView.vue'
import loopList from './components/loop-list.vue'
import assetList from './components/asset-list.vue'
import JmpTimeRange from '@/components/time-range'
import TimeSelect from '../utilView/TimeSelect.vue'

import { formatDateTime } from '@/utils'

const barRef = ref()
const province = ref()
const cveCode = ref()
// 时间(双向：map bar)
const ruleForm = reactive({
  creatBeginTime: '', //开始时间
  createEndTime: '' //结束时间
})

// 时间确定(时间:ruleForm)
const handchange = (e: any) => {
  console.log(e, '选择时间了')
}

// 地图点击(国家:country)
const handleUpdate = (value: string) => {
  barRef.value.show(value)
}
// 柱状图选择(省份:province)
const handListupdata = (value: string) => {
  province.value = value
  // 左 tcp ssh
}
// 漏洞列表点击事件 (cveCode码:cve)
const handCveCode = (value: string) => {
  // 右 cvecode
  cveCode.value = value
}
// 时间选择映射

</script>
<template>
  <div class="jm-mainbox">
    <!-- 日期选择 -->
    <div class="flex justify-between jm-mb jm-bg-color p2">
      <!-- 利用空盒布局 -->
      <div></div>
      <div>
        <jm-form ref="formRef" label-width="auto" :model="ruleForm" :inline="true">
          <jm-form-item label="选择时间：" prop="creatBeginTime" style="margin:0">
            <!-- <jmp-time-range
              v-model:creatBeginTime="ruleForm.creatBeginTime"
              v-model:createEndTime="ruleForm.createEndTime"
              style="width: 23.75rem"
              @change="handchange"
            /> -->
            <TimeSelect v-model:start-time="ruleForm.creatBeginTime" v-model:end-time="ruleForm.createEndTime"></TimeSelect>
          </jm-form-item>
        </jm-form>
      </div>
    </div>

    <div class="jm-bg-color jm-container">
      <!-- 地图 -->
      <div class="chart-item">
        <div class="chart-name">漏洞全球影响范围</div>
        <div class="chart-box map">
          <Map @update="handleUpdate" v-model:time="ruleForm" />
        </div>
      </div>
      <!-- 柱状图 -->
      <div class="chart-item">
        <div class="chart-name">受影响省份地区TOPN</div>
        <div class="chart-box">
          <bar ref="barRef" @upBardate="handListupdata" v-model:time="ruleForm" />
        </div>
      </div>
      
      <div class="chart-item" style="display: flex;justify-content: space-between;">
        <!-- 左侧表 -->
        <div style="width: 49%;">
          <div class="chart-name">漏洞列表</div>
          <div class="chart-box">
            <loop-list ref="loopListRef" @getCveCode="handCveCode" v-model:province="province" />
          </div>
        </div>
        <!-- 右侧表 -->
        <div style="width: 49%;">
          <div class="chart-name">资产列表</div>
          <div class="chart-box">
            <asset-list ref="assetListRef" v-model:cve="cveCode" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./mixin/css/index.scss"></style>
